<template>
	<view>

		<u-popup class="share-popup" :show="showshare" mode="bottom" :round="14" @close="closeshowshare"
			@open="openshowshare">
			<view class="flex row-center md bold m-t-30 m-b-30">分享至</view>
			<view class="flex row-around share-tab">
				<view class="flex-col col--center" @tap="getPoster">
					<image mode="widthFix" class="share-icon"
						src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/351711486175CQPQSe.png"></image>
					<view class="m-t-10">生成海报</view>
				</view>
				<!-- #ifdef MP-WEIXIN-->
				<button open-type="share" class="flex-col col--center" hover-class="none">
					<image class="share-icon"
						src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/471711486187jz1qP7.png"></image>
					<view class="m-t-10">微信好友</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS -->
				<view oclass="flex-col col--center" @tap="shareWx">
					<image class="share-icon"
						src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/471711486187jz1qP7.png"></image>
					<view class="m-t-10">微信好友</view>
				</view>
				<!-- #endif -->
			</view>
			<view class="flex row-center bg-body cancel xl" @tap="showshare = false">取消</view>
		</u-popup>

		<u-popup class="share-poster" :show="showPoster" mode="center" @close="closeshowPoster" @open="openshowPoster">

			<!-- #ifndef H5 -->
			<image style="width: 640rpx" mode="widthFix" :src="poster"></image>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<img style="width: 640rpx" :src="poster" />
			<!-- #endif -->
			<button class="flex row-center save-btn" size="lg" @tap="savePoster">
				<!-- #ifndef H5 -->
				保存图片到相册
				<!-- #endif -->
				<!-- #ifdef H5 -->
				长按保存图片到相册
				<!-- #endif -->
			</button>
		</u-popup>

		<!-- #ifdef H5 -->
		<u-popup class="share-tips" :show="showTips" mode="top" @close="closeshowTips" @open="openshowTips">


			<view style="overflow: hidden">
				<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/151711486215GAg3Ly.png"
					class="share-arrow" />
				<view class="white" style="text-align: center; margin-top: 280rpx">
					<view class="bold lg">立即分享给好友吧</view>
					<view class="sm m-t-10">点击屏幕右上角将本页面分享给好友</view>
				</view>
			</view>
		</u-popup>
		<!-- #endif -->

		<poster ref="poster" :options="options" :qrcode="mnpQrcode" :link="getLink" @success="handleSuccess"
			@fail="handleFail" :poster_img="poster_img" />
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';

	//import { apiGoodsPosterConfig, apiMnpQrCode } from "@/api/app";

	import poster from "./poster.vue";

	export default {
		components: {
			poster,
		},
		props: {
			value: {
				type: Boolean,
			},
			shareId: {
				type: [String, Number],
				default: "",
			},
			pagePath: {
				type: String,
				default: "",
			},
			config: {
				type: Object,
				default: () => ({}),
			},
			type: Number,
			bargain: {
				type: Object,
				default: () => ({}),
			},
			poster_img: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				poster: "",
				showPoster: false,
				showTips: false,
				mnpQrcode: "",
				options: {},
			};
		},

		computed: {
			getLink() {
				let url = `${this.$url}/${this.pagePath}?id=${this.shareId}&invite_code=${uni.getStorageSync('my_invite_code')}`
				return url;
			},
			showshare: {
				get() {
					// console.log(this.value)
					return this.value;
				},
				set(val) {
					console.log(val)
					this.$emit("input", val);
				},
			},
		},
		methods: {
			async getConfig() {
				const parmas =
					this.type == 4 ? {
						type: this.type,
						goods_id: this.bargain.goodsId,
						activity_id: this.bargain.activityId,
					} : {
						goods_id: this.shareId,
						type: this.type,
						activity_id: this.shareId,
					};

				// const data = await apiGoodsPosterConfig(parmas);

				const data = await $H.post('share/GoodsPosterConfig', {
					parmas
				}, {
					token: true
				});

				this.options = data.data;
				console.log(this.options)

			},
			async getPoster() {
				// if (!this.isLogin) return this.$Router.push("/pages/login/login");
				if (this.poster) {
					this.showPoster = true;
					this.showshare = false;
					return;
				}
				uni.showLoading({
					title: "正在生成中",
				});
				await Promise.all([
					this.getConfig(),
					// #ifdef MP-WEIXIN
					this.getMnpQrcode(),
					// #endif
				]);
				setTimeout(() => {
					this.drawCanvas();
				}, 100);
			},
			// 获取商品页面二维码
			getMnpQrcode() {
				return new Promise((resolve, reject) => {
					apiMnpQrCode({
							id: this.shareId,
							page: this.pagePath,
						})
						.then((res) => {
							this.mnpQrcode = res.qr_code;
							resolve(res);
						})
						.catch(() => {
							reject();
						});
				});
			},
			drawCanvas() {
				this.$refs.poster.drawCanvas();
			},
			closeshowshare() {
				this.showshare = false;
			},
			openshowshare() {},
			closeshowPoster() {
				this.showPoster = false;
			},
			openshowPoster() {},
			closeshowTips() {
				this.showTips = false;
			},
			openshowTips() {},
			handleSuccess(val) {
				this.poster = val;
				uni.hideLoading();
				this.showPoster = true;
				this.showshare = false;
			},
			handleFail() {
				uni.hideLoading({
					success: () => {
						// this.$toast({
						// 	title: "生成失败",
						// });
					},
				});
			},
			shareWx() {
				// #ifdef H5
				this.showTips = true;
				this.showshare = false;
				// #endif
				// #ifdef APP-PLUS
				console.log(this.getLink, this.config, 66666);
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.getLink,
					title: this.config.name,
					summary: "",
					imageUrl: this.config.image,
					success: (res) => {
						console.log("分享成功");
					},
					fail: (err) => {
						// this.$toast({
						// 	title: err.errMsg,
						// });
					},
				});
				// #endif
			},

			async savePoster() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster,
					success: (res) => {
						this.showPoster = false;
						// this.$toast({
						// 	title: "保存成功",
						// 	icon: "success",
						// });
					},
					fail: (err) => {
						// this.$toast({
						// 	title: "保存失败",
						// });
						console.log(err);
					},
				});
				// #endif
				// #ifdef H5
				// this.$toast({
				// 	title: "请长按图片保存",
				// });
				// #endif
			},
		},
	};
</script>

<style lang="scss">
	.share-popup {

		.row-center {
			justify-content: center;
		}

		.flex {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.m-b-30 {
			margin-bottom: 16px;
		}

		.m-t-30 {
			margin-top: 16px;
		}

		.md {
			font-size: 16px;
		}

		.bold {
			font-weight: bold;
		}

		.row-around {
			justify-content: space-around;
		}

		.share-tab {

			margin: 40rpx 0 140rpx;

			.share-tab {
				margin: 22px 0 77px;

			}


			.share-icon {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.cancel {
			height: 98rpx;
		}
	}

	.share-poster {
		.share-img {
			width: 640rpx;
			border-radius: 12rpx;
		}

		.save-btn {
			background-color: var(--color-primary);
			color: #fff;
			margin-top: 20rpx;
		}
	}

	.share-tips .share-arrow {
		width: 140rpx;
		height: 250rpx;
		float: right;
		margin: 15rpx 31rpx 0 0;
	}
</style>